<template>
  <div class="approval-drawer">
    <el-drawer
      :visible.sync="showDrawer"
      size="750px"
      class="approval-drawer__drawer-warp"
    >
      <template #title>
        <div class="approval-drawer__drawer-warp--title">
          审批人设置
        </div>
      </template>
      <div class="approval-drawer__drawer-warp--form">
        <el-form
          ref="elFormRef"
          :model="form"
          label-width="auto"
          label-position="top"
          :rules="rules"
        >
          <el-form-item prop="nodeName" label="节点名称">
            <el-input v-model="form.nodeName" placeholder="请填写节点名称" />
          </el-form-item>
          <el-form-item prop="nodeType" label="审批方式（多人审批时）">
            <el-radio-group v-model="form.nodeType" @change="handleRadioChange">
              <el-radio :label="1">顺序（按顺序同意或拒绝）</el-radio>
              <el-radio style="margin: 20px 0" :label="2">会签（需要所有审批人都同意才可通过）</el-radio>
              <el-radio :label="3">并行（其中一名审批人同意或拒绝即可）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="approver" label="审批人选择">
            <el-select
              :key="form.nodeType"
              v-model="form.approver"
              filterable
              placeholder="请选择"
              :filter-method="onSearchEvent"
              :multiple="form.nodeType !== 1"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <div class="approval-drawer__drawer-warp--footer">
        <el-button @click="showDrawer = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>

    </el-drawer>
  </div>
</template>
<script>
import { getAllUser } from '@/api/personnel'
export default {
  name: 'ApprovalFlowDrawer',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showDrawer: false,
      form: {
        nodeType: 1,
        nodeName: '',
        approver: []
      },
      rules: {
        nodeName: [
          { required: true, message: '请填写节点名称', trigger: ['change', 'blur'] }
        ],
        approver: [
          { required: true, message: '请选择审批人', trigger: ['change', 'blur'] }
        ]
      },
      userList: [],
      params: {
        paginate: 50,
        username: ''
      }
    }
  },
  watch: {
    show: {
      handler: function(n, o) {
        this.showDrawer = n
      },
      immediate: true
    },
    formData: {
      handler: function(n, o) {
        this.form = n
      },
      immediate: true
    },
    showDrawer(n, o) {
      this.$emit('update:show', n)
    }
  },
  created() {
    this.getAllUserList()
  },
  methods: {
    async getAllUserList() {
      try {
        const res = await getAllUser(this.params)
        console.log('data --------->', res)
        this.userList = res.data
      } catch (error) {
        this.$message.error('获取用户列表失败')
      }
    },

    onSearchEvent(e) {
      this.params.username = e
      this.getAllUserList()
    },

    handleRadioChange(e) {
      console.log('e --------->', e)
      this.form.approver = []
      this.$nextTick(() => {
        this.clearValidate()
      })
    },

    clearValidate() {
      this.$nextTick(() => {
        this.$refs.elFormRef.clearValidate()
      })
    },

    handleSubmit() {
      this.$refs.elFormRef.validate((valid) => {
        if (valid) {
          this.$emit('onSubmit', this.form)
          this.showDrawer = false
          this.reset()
        }
      })
    },

    reset() {
      this.form = this.$options.data().form
    }
  }
}
</script>
<style lang="scss" scoped>
.approval-drawer{

}
.approval-drawer__drawer-warp {
  &--title {
    font-weight: bold;
    font-size: 20px;
  }
  &--form {
    width: 70%;
  }

  &--footer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #ececec;
    padding: 30px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
:deep(.el-drawer__body) {
  position: relative;
  padding: 20px 20px 0 50px;
}

</style>
